<script setup>

import {inject, onBeforeMount, onMounted, provide, reactive, ref, toRefs} from "vue";
import {ElMessage} from "element-plus";
import {useItem} from "../../../../store/index.js";
import StringOrMumber from "../../StringOrMumber.vue";

const useItemer =useItem()

const props = defineProps({
  volumeConfig: {
    type: Object,
    default: {}
  },
  method: {
    type: String,
    default: "Create"
  }
})
onBeforeMount(()=>{
  if(props.method !== "Create"){
    data.newVolumeConfig = props.volumeConfig
  }
})
// onMounted(()=>{
//   if(props.method !== "Create"){
//     data.newVolumeConfig = props.volumeConfig
//   }
// })

const data=reactive({
  newVolumeConfig:{
    name: '',
    emptyDir: {
      type: '',
      sizeLimit: '',
    },
  },
  mountTypeList: [
    {
      label: '默认',
      value: "默认",
    },
    {
      label: "内存类型",
      value: "Memory"
    }
  ],
  rules: {
    name: [
      {required: true,message: '请输入Volume名称',trigger: 'blur'},
    ]
  },
})
let formRef =ref()
// 添加按钮触发的动作
const submit= ()=>{
  // 1. 提交前校验数据
  formRef.value.validate((valid) => {
    if (valid){
      console.log('data.newVolumeConfig',data.newVolumeConfig)
      if (useItemer.item.spec.template.spec.volumes === undefined){
        useItemer.item.spec.template.spec.volumes = []
      }
      // voluem的名称不可以重复，遍历当前环境中volume的name字段是否重复
      for (let i=0;i<useItemer.item.spec.template.spec.volumes.length;i++){
        if(useItemer.item.spec.template.spec.volumes[i].name === data.newVolumeConfig.name){
          // 说明已经存在已经相同名字的volues
          ElMessage.error("volume名称不能重复")
          return
        }
      }
      const newVlume = JSON.parse(JSON.stringify(data.newVolumeConfig))
      // data.newVolumeConfig 是引用类型，每次添加都会覆盖这个值
      useItemer.item.spec.template.spec.volumes.push(newVlume)
      console.log('data.newVolumeConfig',useItemer.item)
      // 关闭dialog
      closeDialog()
    }else {
      ElMessage.warning('请完善表单')
    }
  })
}



// 订阅关闭dialog的方法
const closeDialog = inject('closeAddVolumeDialog')

const {newVolumeConfig,mountTypeList,rules}=toRefs(data)
</script>

<template>
  <el-form :model="newVolumeConfig" ref="formRef" :rules="rules">
    <el-row :gutter="20">
      <!-- 名称 -->
      <el-col :span="8"  v-if="props.method ==='Create'">
        <el-form-item label="Volume名称" prop="name" required>
          <el-input  v-model.trim="newVolumeConfig.name" style="width: 180px" placeholder="请输Volume名称"/>
        </el-form-item>
      </el-col>
      <!-- 挂载类型 -->
      <el-col :span="8">
        <el-form-item label="挂载类型" prop="emptyDir.type">
          <el-select v-model="newVolumeConfig.emptyDir.type" placeholder="请选择挂载类型"  >
            <el-option
                v-for="s in mountTypeList"
                :key="s.value"
                :label="s.label"
                :value="s.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <!--    宿主机路径      -->
      <el-col :span="8">
        <el-form-item label="限制大小" prop="emptyDir.sizeLimit" >
<!--          <el-input  v-model.trim="newVolumeConfig.emptyDir.sizeLimit" style="width: 180px" placeholder="限制大小"/>-->
          <StringOrMumber v-model:data="newVolumeConfig.emptyDir.sizeLimit"  placeholder="限制大小"  :default-value="'false'" input-width="160px"></StringOrMumber>
        </el-form-item>
      </el-col>
    </el-row>
    <!--  提交按钮  -->
    <div class="button-container"  v-if="props.method ==='Create'">
      <el-button  @click="submit()" type="primary">添加</el-button>
    </div>
  </el-form>
</template>

<style scoped>
/* el-button 剧中存放 */
.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
}
</style>